<template>

    <view :style="themeColor()">
        <view class="bg-[var(--page-bg-color)] min-h-[100vh]" v-if="orderData">
            <view class="pt-[30rpx] sidebar-margin payment-bottom">
                <!-- 配送方式 -->

                <view class="mb-[var(--top-m)] card-template   ">
                    <view class="card-template-item">
                        <view class="text-[32rpx] w-[150rpx] leading-[30rpx] text-[#303133]">补录日期</view>
                        <view class="flex-1 flex w-0 text-right  price-font text-[#333] text-[32rpx] ">
                            <uni-datetime-picker v-model="createData.repairDate" :border="false" type="date"
                                :end="new Date().getTime()" />
                            <text class="nc-iconfont nc-icon-youV6xx text-[var(--text-color-light9)] ml-[2rpx]"></text>

                        </view>

                    </view>
                    <view class="card-template-item">
                        <view class="text-[32rpx] w-[150rpx] leading-[30rpx] text-[#303133]">销售提成</view>
                        <view class="flex-1 w-0 text-right  price-font text-[#333] text-[32rpx] flex justify-end"
                            @click="rebateSheetShow = true">
                            <text class="text-[32rpx] text-gray-subtitle"> {{ createData.rebateType == 0 ? '统一' :
                                '单一'
                            }}
                            </text>
                            <text class="nc-iconfont nc-icon-youV6xx text-[var(--text-color-light9)] ml-[2rpx]"></text>

                        </view>
                    </view>
                    <view class="card-template-item" v-if="createData.rebateType == 0">
                        <view class="text-[32rpx] w-[150rpx] leading-[30rpx] text-[#303133]">选择员工</view>
                        <view
                            class="flex-1 w-0 text-right  price-font text-[#333] text-[32rpx] flex justify-end items-center"
                            @click="employeeRef.open(createData.employeeStr)">
                            <view class=" flex justify-end truncate">
                                <text v-if="createData.employeeStr && createData.employeeStr.length"
                                    class=" text-[32rpx]  ">
                                    {{ cartEmployeeText }}
                                </text>
                                <text class="text-[32rpx] text-gray-subtitle" v-else>请选择员工</text>
                            </view>
                            <text class="nc-iconfont nc-icon-youV6xx text-[var(--text-color-light9)] ml-[2rpx]"></text>
                        </view>
                    </view>

                </view>
                <view class="mb-[var(--top-m)] card-template p-[0] pb-[var(--pad-top-m)]">
                    <view class="py-[var(--pad-top-m)]">
                        <view class="mb-[20rpx] " v-for="(item, index) in orderData.goods" :key="item.spuId"
                            :class="{ 'border-[4rpx] border-[#ef000c] rounded-[8rpx] pb-[20rpx] border-solid': item.spuType == 3 }">
                            <!-- 商品 -->
                            <view class="flex px-[20rpx] " v-if="item.spuType != 3">

                                <u--image radius="var(--goods-rounded-big)" width="180rpx" height="180rpx"
                                    :src="img(item.picUrl)" model="aspectFill">
                                    <template #error>
                                        <image
                                            class="w-[180rpx] h-[180rpx] rounded-[var(--goods-rounded-big)] overflow-hidden"
                                            :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill">
                                        </image>
                                    </template>
                                </u--image>
                                <view class="flex flex-1 w-0 flex-col justify-between ml-[20rpx] py-[6rpx]">
                                    <view class="line-normal">
                                        <view class="truncate text-[#303133] font-bold text-[32rpx] leading-[38rpx]">
                                            <view class="brand-tag" v-if="getCartInfo(item.cartId).sales">
                                                赠品
                                            </view>
                                            <view class="brand-tag" v-if="item.spuType">
                                                {{ (item.spuType == 2 || item.spuType ==
                                                    4) ? formatSkuType(item.skuType) : formatSpuType(item.spuType)
                                                }}
                                            </view> {{ item.titleName || item.spuName }}
                                        </view>
                                        <view class="flex items-center mt-[14rpx]">
                                            <view class=" flex mr-[8rpx]" v-if="item.properties && item.specType">
                                                <text class="truncate text-[24rpx]  leading-[32rpx]">{{
                                                    skuSpecFormat(item.properties)
                                                }} /</text>
                                            </view>
                                            <template v-if="item?.spuType == 2">
                                                <text class="text-[24rpx] text-[var(--price-text-color)]">{{
                                                    filterCardAttributes(item, true, true) }}</text>
                                            </template>
                                        </view>

                                    </view>
                                    <view class="flex items-center flex-wrap mt-[8rpx]">

                                        <view class="text-[24rpx]  leading-[34rpx] ">
                                            零售单价: ￥{{ diyGoods.fen2yuan(item.price) }}
                                        </view>
                                        <view class="text-[24rpx]  leading-[34rpx] ml-[8rpx] ml-[8rpx]">
                                            实售总价: ￥{{ diyGoods.fen2yuan(item.realPrice) }}
                                        </view>
                                        <view class="text-[24rpx] text-[var(--price-text-color)] leading-[34rpx] "
                                            v-if="item.arrearsPrice > 0">
                                            欠款金额: ￥{{ diyGoods.fen2yuan(item.arrearsPrice) }}
                                        </view>
                                    </view>
                                    <view class="flex justify-between items-baseline">
                                        <view class="text-[var(--price-text-color)] flex items-baseline  price-font">
                                            <text class="text-[24rpx] font-500 mr-[4rpx]">￥</text>
                                            <text class="text-[40rpx] font-500">{{
                                                parseFloat(diyGoods.fen2yuan(item.singlePrice)).toFixed(2).split('.')[0]
                                            }}</text>
                                            <text class="text-[24rpx] font-500">.{{
                                                parseFloat(diyGoods.fen2yuan(item.singlePrice)).toFixed(2).split('.')[1]
                                            }}</text>
                                            <text @click="onHandleEdit(item)"
                                                class="nc-iconfont nc-icon-xiugaiV6xx text-[32rpx] text-[var(--price-text-color)] ml-10rpx"></text>
                                        </view>
                                        <view class="font-400 text-[32rpx] text-[#303133]">
                                            <text>x</text>
                                            <text>{{ item.count }}</text>
                                        </view>
                                    </view>
                                </view>
                            </view>
                            <!-- 组合商品 -->
                            <view class="" v-if="item.spuType == 3">
                                <view class="p-[var(--pad-sidebar-m)] text-[32rpx] bg-[#ef000c] text-[#fff]">
                                    组合名称:{{
                                        item?.activeInfo?.activityName
                                    }}
                                </view>
                                <view class="flex px-[20rpx] pt-[20rpx]">

                                    <u--image radius="var(--goods-rounded-big)" width="180rpx" height="180rpx"
                                        :src="img(item.picUrl)" model="aspectFill">
                                        <template #error>
                                            <image
                                                class="w-[180rpx] h-[180rpx] rounded-[var(--goods-rounded-big)] overflow-hidden"
                                                :src="img('static/resource/images/diy/shop_default.jpg')"
                                                mode="aspectFill">
                                            </image>
                                        </template>
                                    </u--image>
                                    <view class="flex flex-1 w-0 flex-col justify-between ml-[20rpx] py-[6rpx]">
                                        <view class="line-normal">
                                            <view
                                                class="truncate text-[#303133] font-bold text-[32rpx] leading-[38rpx]">
                                                <view class="brand-tag" v-if="getCartInfo(item.cartId).sales">
                                                    赠品
                                                </view>
                                                <view class="brand-tag" v-if="item.spuType">
                                                    {{ (item.spuType == 2 || item.spuType ==
                                                        4) ? formatSkuType(item.skuType) : formatSpuType(item.spuType)
                                                    }}
                                                </view> {{ item.titleName || item.spuName }}
                                            </view>
                                            <view class="flex items-center mt-[14rpx]">
                                                <view class=" flex mr-[8rpx]" v-if="item.properties && item.specType">
                                                    <text
                                                        class="truncate text-[24rpx] text-[var(--text-color-light9)] leading-[32rpx]">{{
                                                            skuSpecFormat(item.properties)
                                                        }}</text>
                                                </view>
                                                <template v-if="item?.spuType == 2">
                                                    <text class="text-[24rpx]">{{
                                                        filterCardAttributes(item, true, true) }}</text>
                                                </template>
                                            </view>

                                        </view>
                                        <view class="flex items-center flex-wrap mt-[8rpx]">

                                            <view class="text-[24rpx]  leading-[34rpx] mr-[8rpx]">
                                                零售单价: ￥{{ diyGoods.fen2yuan(item.price) }}
                                            </view>
                                            <view class="text-[24rpx]  leading-[34rpx]  mr-[8rpx]">
                                                实售总价: ￥{{ diyGoods.fen2yuan(item.realPrice) }}
                                            </view>
                                            <view class="text-[24rpx] text-[var(--price-text-color)] leading-[34rpx] "
                                                v-if="item.arrearsPrice > 0">
                                                欠款金额: ￥{{ diyGoods.fen2yuan(item.arrearsPrice) }}
                                            </view>
                                        </view>
                                        <view class="flex justify-between items-baseline">
                                            <view
                                                class="text-[var(--price-text-color)] flex items-baseline  price-font">
                                                <text class="text-[24rpx] font-500 mr-[4rpx]">￥</text>
                                                <text class="text-[40rpx] font-500">{{
                                                    parseFloat(diyGoods.fen2yuan(item.singlePrice)).toFixed(2).split('.')[0]
                                                }}</text>
                                                <text class="text-[24rpx] font-500">.{{
                                                    parseFloat(diyGoods.fen2yuan(item.singlePrice)).toFixed(2).split('.')[1]
                                                }}</text>
                                                <text @click="onHandleEdit(item)"
                                                    class="nc-iconfont nc-icon-xiugaiV6xx text-[32rpx] text-[var(--price-text-color)] ml-10rpx"></text>
                                            </view>
                                            <view class="font-400 text-[32rpx] text-[#303133]">
                                                <text>x</text>
                                                <text>{{ item.count }}</text>
                                            </view>
                                        </view>
                                    </view>
                                </view>
                                <u-line dashed margin="20rpx 0 0 0" color="#ef000c"></u-line>
                                <block v-for="(acitvityItem, index) in item?.activeInfo?.generalProductDTOList"
                                    :key="item.spuId">
                                    <view class="flex px-[20rpx] pt-[20rpx]">

                                        <u--image radius="var(--goods-rounded-big)" width="180rpx" height="180rpx"
                                            :src="img(acitvityItem?.picUrl)" model="aspectFill">
                                            <template #error>
                                                <image
                                                    class="w-[180rpx] h-[180rpx] rounded-[var(--goods-rounded-big)] overflow-hidden"
                                                    :src="img('static/resource/images/diy/shop_default.jpg')"
                                                    mode="aspectFill">
                                                </image>
                                            </template>
                                        </u--image>
                                        <view class="flex flex-1 w-0 flex-col justify-between ml-[20rpx] py-[6rpx]">
                                            <view class="line-normal">
                                                <view
                                                    class="truncate text-[#303133] font-bold text-[32rpx] leading-[38rpx]">
                                                    <view class="brand-tag" v-if="acitvityItem?.spuType">
                                                        {{ (acitvityItem?.spuType == 2 || acitvityItem?.spuType ==
                                                            4) ? formatSkuType(acitvityItem?.sku?.skuType) :
                                                            formatSpuType(acitvityItem?.spuType)
                                                        }}
                                                    </view> {{ acitvityItem?.titleName || acitvityItem?.spuName }}
                                                </view>
                                                <view class="flex items-center mt-[14rpx]">
                                                    <template v-if="acitvityItem?.spuType == 2">
                                                        <text class="text-[24rpx]">{{
                                                            filterCardAttributes(acitvityItem?.sku, true, true)
                                                            }}</text>
                                                    </template>
                                                </view>

                                            </view>
                                            <view class="flex items-center mt-[8rpx]">


                                            </view>
                                            <view class="flex justify-between items-baseline">
                                                <view
                                                    class="text-[var(--price-text-color)] flex items-baseline  price-font">
                                                    &nbsp;
                                                </view>
                                                <view class="font-400 text-[32rpx] text-[#303133]">
                                                    <text>x</text>
                                                    <text>{{ item.count * acitvityItem?.activityProductCount }}</text>
                                                </view>
                                            </view>
                                        </view>
                                    </view>
                                </block>
                            </view>

                            <view class="flex items-center mt-[10rpx] mb-[auto] px-[20rpx]"
                                v-if="createData.rebateType == 1">
                                <view class="text-[32rpx] w-[150rpx] leading-[30rpx] text-[#303133]">选择员工
                                </view>
                                <view
                                    class="flex-1 w-0 text-right  price-font text-[#333] text-[32rpx] flex justify-end items-center"
                                    @click="handleSelectEmployee(item)">

                                    <view class=" flex justify-end truncate">
                                        <text v-if="item.employeeStr && item.employeeStr.length"
                                            class=" text-[32rpx]  ">
                                            {{ countEmployeeText(item.employeeStr || []) }}
                                        </text>
                                        <text class="text-[32rpx] text-gray-subtitle" v-else>请选择员工</text>
                                    </view>
                                    <text
                                        class="nc-iconfont nc-icon-youV6xx text-[var(--text-color-light9)] ml-[2rpx]"></text>
                                </view>

                            </view>

                        </view>
                    </view>
                    <!-- 买家留言 -->
                    <view class="bg-white flex items-center leading-[30rpx] px-[var(--pad-sidebar-m)]">
                        <view class="text-[32rpx] w-[150rpx] text-[#303133]">备注</view>
                        <view class="flex-1 text-[#303133]">
                            <input type="text" v-model="createData.member_remark"
                                class="text-right text-[#333] text-[32rpx]" maxlength="50" placeholder="请输入订单备注"
                                placeholder-class="text-[var(--text-color-light9)] text-[32rpx]">
                        </view>
                    </view>
                    <!-- 发票 -->
                    <view v-if="invoiceRef && invoiceRef.invoiceOpen"
                        class="flex items-center text-[#303133] leading-[30rpx] mt-[30rpx] px-[var(--pad-sidebar-m)]"
                        @click="invoiceRef.open()">
                        <view class="text-[32rpx] w-[150rpx] text-[#303133]">发票信息</view>
                        <view class="flex-1 w-0 text-right truncate">
                            <text class="text-[32rpx] text-[#333]">{{ createData.invoice.header_name || '不需要发票'
                            }}</text>
                        </view>
                        <text class="nc-iconfont nc-icon-youV6xx text-[28rpx] text-[var(--text-color-light9)]"></text>
                    </view>

                </view>


                <view class="mb-[var(--top-m)] card-template">
                    <!-- <view class="title !text-[32rpx]">价格明细</view> -->
                    <!-- 优惠券 -->
                    <view class="flex items-center h-[40rpx] leading-[40rpx] mb-[34rpx]"
                        @click="couponRef.open(createData.discount.coupon_id)" v-if="couponRef && couponList.length">
                        <view class="text-[32rpx] w-[150rpx] text-[#303133] flex-shrink-0">优惠券</view>
                        <view class="flex-1 flex justify-end truncate">
                            <text v-if="useCoupon" class="text-[var(--primary-color)] text-[32rpx] truncate ">
                                {{ useCoupon?.couponName }}
                            </text>
                            <text class="text-[32rpx] text-gray-subtitle" v-else>请选择优惠券</text>
                        </view>
                        <text
                            class="nc-iconfont nc-icon-youV6xx -mb-[2rpx] text-[28rpx] text-[var(--text-color-light9)]"></text>
                    </view>
                    <!-- 会员余额 -->
                    <view class="flex items-center h-[40rpx] leading-[40rpx] mb-[34rpx]" @click="handleWalletPayment()"
                        v-if="walletClassify">
                        <view class="text-[32rpx] w-[150rpx] text-[#303133] flex-shrink-0">{{ walletClassify?.classiName
                        }}
                        </view>
                        <view class="flex-1 flex justify-end truncate">
                            <text v-if="walletClassify.totalPayPrice"
                                class="text-[var(--primary-color)] text-[32rpx] price-font truncate ">
                                ￥{{ parseFloat(diyGoods.fen2yuan(walletClassify.totalPayPrice)).toFixed(2) }}
                            </text>
                            <text class="text-[32rpx] text-gray-subtitle" v-else>{{ walletClassify.usable ? '请选择会员余额' :
                                '不可用'
                            }}</text>
                        </view>
                        <text
                            class="nc-iconfont nc-icon-youV6xx -mb-[2rpx] text-[28rpx] text-[var(--text-color-light9)]"></text>
                    </view>
                    <!-- 储值卡支付 -->
                    <view class="flex items-center h-[40rpx] leading-[40rpx]  mb-[34rpx]" @click="handlePPCPayment()"
                        v-if="ppcClassify">
                        <view class="text-[32rpx] w-[180rpx] text-[#303133] flex-shrink-0">{{ ppcClassify?.classiName }}
                        </view>
                        <view class="flex-1 flex justify-end truncate">
                            <text v-if="ppcClassify.totalPayPrice"
                                class="text-[var(--primary-color)] text-[32rpx] price-font truncate ">
                                ￥{{ parseFloat(diyGoods.fen2yuan(ppcClassify.totalPayPrice)).toFixed(2) }}
                            </text>
                            <text class="text-[32rpx] text-gray-subtitle" v-else> {{ ppcClassify.usable ? '请选择卡类资产' :
                                '不可用'
                            }}</text>
                        </view>
                        <text
                            class="nc-iconfont nc-icon-youV6xx -mb-[2rpx] text-[28rpx] text-[var(--text-color-light9)]"></text>
                    </view>
                    <!-- 欠款支付 -->
                    <view class="flex items-center h-[40rpx] leading-[40rpx]" @click="handleDebtPayment()"
                        v-if="debtClassify">
                        <view class="text-[32rpx] w-[150rpx] text-[#303133] flex-shrink-0">欠款支付</view>
                        <view class="flex-1 flex justify-end truncate">
                            <text v-if="orderData.price.arrearsPrice && orderData.price.arrearsPrice"
                                class="text-[var(--primary-color)] text-[32rpx] price-font truncate ">
                                ￥{{ parseFloat(diyGoods.fen2yuan(orderData.price.arrearsPrice)).toFixed(2) }}
                            </text>
                            <text class="text-[32rpx] text-gray-subtitle" v-else>请选择欠款支付</text>
                        </view>
                        <text
                            class="nc-iconfont nc-icon-youV6xx -mb-[2rpx] text-[28rpx] text-[var(--text-color-light9)]"></text>
                    </view>
                </view>

                <view class="card-template">
                    <view class="title !text-[32rpx]">价格明细</view>
                    <view class="card-template-item">
                        <view class="text-[32rpx] w-[170rpx] leading-[30rpx] text-[#303133]">订单金额</view>
                        <view class="flex-1 w-0 text-right  price-font text-[#333] text-[32rpx]">
                            ￥{{ parseFloat(diyGoods.fen2yuan(orderData.price.totalPrice)).toFixed(2) }}
                        </view>
                    </view>
                    <!-- <view class="card-template-item" v-if="parseFloat(orderData.price.paidPrice)">
                        <view class="text-[32rpx] w-[170rpx] leading-[30rpx] text-[#303133]">已付金额</view>
                        <view
                            class="flex-1 w-0 text-right text-[var(--price-text-color)] text-[32rpx] price-font leading-[1]">
                            ￥{{ parseFloat(diyGoods.fen2yuan(orderData.price.paidPrice)).toFixed(2) }}
                        </view>
                    </view> -->
                    <view class="card-template-item" v-if="parseFloat(orderData.price.givePrice)">
                        <view class="text-[32rpx] w-[170rpx] leading-[30rpx] text-[#303133]">订单优惠</view>
                        <view
                            class="flex-1 w-0 text-right text-[var(--price-text-color)] text-[32rpx] price-font leading-[1]">
                            ￥{{ parseFloat(diyGoods.fen2yuan(orderData.price.givePrice)).toFixed(2) }}
                        </view>
                    </view>
                    <view class="card-template-item"
                        v-for="(item, index) in getPayMentList(orderData.price.payMentList, 1)" :key="index">
                        <view class="text-[32rpx] w-[220rpx] leading-[30rpx] text-[#303133]">{{ item.classifyName }}
                        </view>
                        <view
                            class="flex-1 w-0 text-right text-[var(--price-text-color)] text-[32rpx] price-font leading-[1]">
                            ￥{{ parseFloat(diyGoods.fen2yuan(item.balance)).toFixed(2) }}
                        </view>
                    </view>
                    <view class="card-template-item"
                        v-for="(item, index) in getPayMentList(orderData.price.payMentList, 0)" :key="index">
                        <view class="text-[32rpx] w-[220rpx] leading-[30rpx] text-[#303133]">{{ item.classifyName }}
                        </view>
                        <view
                            class="flex-1 w-0 text-right text-[var(--price-text-color)] text-[32rpx] price-font leading-[1]">
                            ￥{{ parseFloat(diyGoods.fen2yuan(item.balance)).toFixed(2) }}
                        </view>
                    </view>
                    <view class="card-template-item" v-if="parseFloat(orderData.price.payPrice)">
                        <view class="text-[32rpx] w-[170rpx] leading-[30rpx] text-[#303133]">待支付金额</view>
                        <view
                            class="flex-1 w-0 text-right text-[var(--price-text-color)] text-[40rpx] price-font leading-[1]">
                            ￥{{ parseFloat(diyGoods.fen2yuan(orderData.price.payPrice)).toFixed(2) }}
                        </view>
                        <!-- <text v-if="changeClassify" @click="handleChangePrice"
                            class="nc-iconfont nc-icon-xiugaiV6xx text-[32rpx] text-[var(--price-text-color)] ml-10rpx"></text> -->
                    </view>
                    <view class="card-template-item" v-if="parseFloat(orderData.price.deliveryPrice)">
                        <view class="text-[32rpx] w-[150rpx] leading-[30rpx] text-[#303133]">配送费用</view>
                        <view class="flex-1 w-0 text-right price-font text-[#333] text-[32rpx]">
                            ￥{{ parseFloat(diyGoods.fen2yuan(orderData.price.deliveryPrice)).toFixed(2) }}
                        </view>
                    </view>
                    <view class="card-template-item" v-if="orderData.price.discountPrice">
                        <view class="text-[32rpx] w-[150rpx] leading-[30rpx] text-[#303133]">活动优惠</view>
                        <view
                            class="flex-1 w-0 text-right text-[var(--price-text-color)] text-[32rpx] price-font leading-[1]">
                            ￥{{ parseFloat(diyGoods.fen2yuan(orderData.price.discountPrice)).toFixed(2) }}
                        </view>
                    </view>
                    <!-- <view class="card-template-item" v-if="parseFloat(orderData.price.couponPrice)">
                        <view class="text-[32rpx] w-[170rpx] leading-[30rpx] text-[#303133]">优惠券优惠</view>
                        <view
                            class="flex-1 w-0 text-right text-[var(--price-text-color)] text-[32rpx] price-font leading-[1]">
                            ￥{{ parseFloat(diyGoods.fen2yuan(orderData.price.couponPrice)).toFixed(2) }}
                        </view>
                    </view> -->
                    <!-- <view class="card-template-item" v-if="parseFloat(orderData.price.vipPrice)">
                        <view class="text-[32rpx] w-[170rpx] leading-[30rpx] text-[#303133]">会员优惠</view>
                        <view
                            class="flex-1 w-0 text-right text-[var(--price-text-color)] text-[32rpx] price-font leading-[1]">
                            ￥{{ parseFloat(diyGoods.fen2yuan(orderData.price.vipPrice)).toFixed(2) }}
                        </view>
                    </view> -->
                    <!-- <view class="card-template-item" v-if="parseFloat(orderData.basic.manjian_discount_money)">
                        <view class="text-[32rpx] w-[170rpx] leading-[30rpx] text-[#303133]">满减优惠</view>
                        <view
                            class="flex-1 w-0 text-right text-[var(--price-text-color)] text-[32rpx] price-font leading-[1]">
                            -￥{{ parseFloat(orderData.basic.manjian_discount_money).toFixed(2) }}
                        </view>
                    </view> -->
                </view>
            </view>
            <u-tabbar :fixed="true" :placeholder="true" :safeAreaInsetBottom="true" zIndex="10">
                <view class="flex-1 flex items-center justify-between pl-[30rpx] pr-[20rpx]">
                    <view class="flex items-baseline">
                        <text class="text-[32rpx] text-[#333] leading-[32rpx]">合计：</text>
                        <view class="inline-block">
                            <text
                                class="text-[32rpx] font-500 text-[var(--price-text-color)] price-font leading-[30rpx]">￥</text>
                            <text
                                class="text-[44rpx]  font-500  text-[var(--price-text-color)] price-font leading-[46rpx]">{{
                                    parseFloat(diyGoods.fen2yuan(orderData.price.payPrice)).toFixed(2).split('.')[0]
                                }}</text>
                            <text
                                class="text-[32rpx]  font-500  text-[var(--price-text-color)] price-font leading-[46rpx]">.{{
                                    parseFloat(diyGoods.fen2yuan(orderData.price.payPrice)).toFixed(2).split('.')[1]
                                }}</text>
                        </view>
                        <text v-if="changeClassify" @click="handleChangePrice"
                            class="nc-iconfont nc-icon-xiugaiV6xx text-[32rpx] text-[var(--price-text-color)] ml-10rpx"></text>

                    </view>
                    <button :loading="createLoading"
                        class="w-[250rpx]  h-[84rpx] font-500 text-[32rpx] leading-[84rpx] !text-[#fff] m-0  rounded-full  primary-btn-bg remove-border"
                        hover-class="none" @click="create">提交订单</button>
                </view>
            </u-tabbar>


        </view>
        <!-- 选择统一单一 -->
        <u-action-sheet class="" :actions="rebateList" :show="rebateSheetShow" :closeOnClickOverlay="true"
            :safeAreaInsetBottom="true" @close="rebateSheetShow = false" @select="updateRebate"></u-action-sheet>
        <!-- 选择优惠券 -->
        <select-coupon :order-key="createData.order_key" :coupons="coupons" ref="couponRef"
            @confirm="confirmSelectCoupon" />
        <!-- 选择员工 -->
        <select-employee ref="employeeRef" @confirm="confirmSelectEmployee" />
        <!-- 发票 -->
        <!-- <invoice ref="invoiceRef" @confirm="confirmInvoice" /> -->
        <!-- 支付密码弹框 -->
        <password-popup ref="passwordRef" @confirm="confirmPassword" />
        <!-- 整单改价弹框 -->
        <price-change-popup ref="priceChangeRef" v-if="orderData" :order-info="orderData"
            :payment-map="orderData.paymentMap" @confirm="onSelectPaymentPay" />
        <!-- 现金支付 欠款支付 线上支付 根据不同按钮进行不同的支付方式展示 -->
        <select-payment ref="selectPaymentRef" v-if="orderData" :order-info="orderData" :payment-map="payDialogClassify"
            @confirm="onSelectPaymentPay" @confirm-order="confirmOrder" @success="handleUpdate"></select-payment>

        <paymentPopup ref="paymentPopupRef" v-if="orderData" :order-info="orderData" :payment-map="orderData.paymentMap"
            @confirm="onSelectPaymentPay" @success="handleUpdate" />
        <!-- 储值卡支付 -->
        <select-ppc ref="ppcPaymentRef" v-if="orderData" :order-info="orderData" :payment-map="orderData.paymentMap"
            @confirm="onSelectPaymentPay" @confirm-order="confirmOrder" @success="handleUpdate"></select-ppc>
        <!-- 单品改价优惠 -->
        <select-cartItem-change ref="updatePriceFormRef" v-if="orderData" :payment-map="orderData.paymentMap"
            @confirm-order="confirmCartItem"></select-cartItem-change>
        <!-- <pay ref="payRef" @close="payClose" /> -->

    </view>
    <!-- 水印 -->
    <!-- <watermark></watermark> -->
</template>

<script setup lang="ts">
import { ref, computed, watch, nextTick, onMounted } from 'vue'
import { editCart } from '@/addon/shop/api/cart';
import { getPayInfo } from '@/app/api/pay'

import { orderCreateCalculate, orderCreate, getShopOrderDetail, getSystemConfigByKey } from '@/addon/shop/api/order'
import { redirect, img, moneyFormat, mobileHide, goback } from '@/utils/common'
import selectCoupon from './components/select-coupon/select-coupon.vue'
// import invoice from './components/invoice/invoice.vue'
import passwordPopup from '@/addon/components/password-popup/password-popup.vue'
import priceChangePopup from '@/addon/components/price-change-popup/price-change-popup.vue';
import paymentPopup from '@/addon/components/payment-popup/payment-popup.vue';
import selectPayment from '@/addon/components/select-payment/select-payment.vue';
import selectPpc from '@/addon/components/select-ppc/select-ppc.vue';
import selectCartItemChange from '@/addon/components/select-cartItem-change/select-cartItem-change.vue';
import { useSubscribeMessage } from '@/hooks/useSubscribeMessage'
import { onShow, onUnload } from '@dcloudio/uni-app'
import { cloneDeep } from 'lodash-es'
import { useGoods } from '@/addon/shop/hooks/useGoods'
import { getSkuActivity } from '@/addon/shop/api/goods'

const diyGoods = useGoods();

import { skuSpecFormat, formatSkuType, formatSpuType, filterCardAttributes } from '@/utils/formatting'
const coupons = ref([])
const useCoupon = ref({})
const createData: any = ref({
    order_key: '',
    member_remark: '',
    discount: {},
    invoice: {},
    delivery: {
        delivery_type: '0'
    },
    extend_data: {}, // 扩展数据，拼团价用到
    // ========== 补录 ==========
    isRepair: false, //是否补录
    repairDate: undefined, //补录日期
    // ========== 分成 ==========
    rebateType: 0, //0统一 1单一
    // ========== 员工 ==========
    employeeStr: [],
    // ========== 密码 ==========
    enalePassword: false, // 开启密码支付 true是
    password: undefined,//支付密码
    // =======支付======
    pay: [] as any,
    // 购物车订单号 
    no: "",

})

const orderData: any = ref(null)
const couponRef = ref()
const payRef = ref()
const invoiceRef = ref()
const employeeRef = ref()
const passwordRef = ref()
const createLoading = ref(false)
uni.getStorageSync('orderCreateData') && Object.assign(createData.value, uni.getStorageSync('orderCreateData'))
console.log(createData.value)
onShow(() => {
    const options = uni.getEnterOptionsSync();
    // scene 1038	从另一个小程序返回
    // #ifdef MP
    if (options.scene == 1038) {
        uni.$emit('scene', {
            scene: 1038
        })
        return
    }
    // #endif
    getEnalePassword()

})
onUnload(() => {
    uni.$off('scene')
})
/**
 * 单商品优惠 欠款
 */
const updatePriceFormRef = ref() // 商品调价表单 Ref

const onHandleEdit = (item: any) => {
    const deepCopyFormData = cloneDeep(item)
    const currentItem = createData.value.items.filter((ele: any) => {
        return ele.skuId == deepCopyFormData.skuId
    })[0]
    deepCopyFormData.cartId = currentItem.cartId
    console.log(deepCopyFormData)
    updatePriceFormRef.value.open(deepCopyFormData)


}
/**
 *
 * @param paymentlist 支付列表
 * @param type  0 支付 1 优惠
 */
const getPayMentList = (paymentlist: any, type: any) => {
    if (!paymentlist || paymentlist.length == 0) {
        return []
    }
    return paymentlist.filter((ele: any) => {
        return ele.classSubType == type
    })
}

/**
 * 选择支付方式
 */
const selectPaymentRef = ref()
const handleSelectPayment = () => {

    selectPaymentRef.value.open()
}
/**
 * 余额支付支付
 */
const walletClassify = computed(() => {
    const classify = orderData.value.paymentMap.find((ele: any) => {
        return ele.classify == 'wallet'
    })
    return classify as any
})
const handleWalletPayment = () => {
    if (walletClassify.value) {
        if (walletClassify.value.usable) {
            paymentPopupRef.value.open(walletClassify.value)

        } else {
            uni.showToast({
                title: '会员余额不可用',
                icon: 'none'
            })
        }
    }
}
/**
 * 储值卡支付
 */
const ppcClassify = computed(() => {
    const classify = orderData.value.paymentMap.find((ele: any) => {
        return ele.classify == 'ppc'
    })
    return classify as any
})
const ppcPaymentRef = ref()
const handlePPCPayment = () => {
    if (ppcClassify.value) {
        if (ppcClassify.value.usable) {
            ppcPaymentRef.value.open()

        } else {
            uni.showToast({
                title: '卡类资产不可用',
                icon: 'none'
            })
        }
    }
}
/**
 * 欠款支付
 */
const paymentPopupRef = ref()

const debtClassify = computed(() => {
    const classify = orderData.value.paymentMap.find((ele: any) => {
        return ele.classify == 'debt'
    })
    return classify as any
})
const handleDebtPayment = () => {
    if (debtClassify.value) {
        paymentPopupRef.value.open(debtClassify.value)
    }
}
/** 虚拟支付 欠款支付 前置支付 */
const frontClassify = computed(() => {

    const channelGroup = orderData.value.paymentMap.filter((ele: any) => {
        return ele.channelGroup === '0' && !['change', 'debt'].includes(ele.classify)

    }) as any

    return channelGroup || []
}) as any
/** 真实支付 现金支付 线上支付 后置支付 */
// const payDialogClassifyType = ref<any>() //抽屉模式弹窗所使用的支付方式类型
const payDialogClassify = computed(() => {
    // if (payDialogClassifyType.value == 'debt') {
    //     return debtClassify.value
    // } else if (payDialogClassifyType.value == 'wallet') {
    //     return walletClassify.value
    // } else {

    // }
    return postfClassify.value
})
const postfClassify = computed(() => {
    const channelGroup = orderData.value.paymentMap.filter((ele: any) => {

        return ele.channelGroup == '1'
    }) as any

    return channelGroup || []
}) as any
/**
 * 整单改价
 */
const priceChangeRef = ref()
const changeClassify = computed(() => {
    return orderData.value.paymentMap.find((ele: any) => {
        return ele.classify == 'change'
    })
}) as any
const handleChangePrice = () => {
    if (changeClassify.value) {
        priceChangeRef.value.open(changeClassify.value)
    }
}
// 选择资产支付
const onSelectPaymentPay = async (item: any, classify: any) => {
    let params = {
        classify: classify,
        payStatus: item.payStatus,
        paybalance: item.paybalance,
        assetsId: item.assetsId,
        usingDis: item.usingDis
    }
    // 当前所使用的 对应支付类型的支付列表
    createData.value.pay = [params]

    // state.showPayDialog = false
    // 合并使用的资产
    await calculate()
    // uni.hideLoading()

}

const handleUpdate = async () => {
    //后台说 使用完资产接口 需要清空支付方式 调用计算接口
    createData.value.pay = []
    await calculate()
}
/**
 * 修改销售模式
 */
const rebateSheetShow = ref(false)
const rebateList = computed(() => {
    return [
        { name: '统一', value: 0 },
        { name: '单一', value: 1 }
    ]
})
const updateRebate = (e: any) => {
    createData.value.rebateType = e.value
    if (e.value == 1) {
        createData.value.employeeStr = []
    }
}

/** 密码 */

const getEnalePassword = async () => {
    let { data } = await getSystemConfigByKey({ configKey: 'xsEnalePassword' })
    createData.value.enalePassword = data.configValue
}

/** 选择员工 */
const nowCartItem = ref();
const handleSelectEmployee = (item: any) => {
    nowCartItem.value = item;
    employeeRef.value.open(item.employeeStr || [])
}
const cartEmployeeText = computed(() => {
    let employeeText = '';
    if (createData.value.rebateType == 0) {
        createData.value.employeeStr.forEach((element, index) => {
            if (index == createData.value.employeeStr.length - 1) {
                employeeText += element.employeeName + ' ' + element.proportion + '%';
            } else {
                employeeText += element.employeeName + ' ' + element.proportion + '%' + '|';
            }
        });
    } else if (createData.value.rebateType == 1) {
        createData.value.orderInfo.items.forEach((element) => {
            element.employeeList &&
                element.employeeList.forEach((ele, index) => {
                    if (index == ele.employeeList.length - 1) {
                        employeeText += ele.employeeName + ele.proportion + '%';
                    } else {
                        employeeText += ele.employeeName + ele.proportion + '%' + '|';
                    }
                });
        });
    }
    return employeeText;
});
const countEmployeeText = (arry: any) => {
    let employeeText = '';
    arry.forEach((element: any, index: any) => {
        if (index == arry.length - 1) {
            employeeText += element.employeeName + ' ' + element.proportion + '%';
        } else {
            employeeText += element.employeeName + ' ' + element.proportion + '%' + '|';
        }
    });
    return employeeText;
}


const confirmSelectEmployee = (employee: any) => {
    if (createData.value.rebateType == 0) {
        createData.value.employeeStr = employee
        if (autoConfirm.value) {
            create()

        }
    } else {
        nowCartItem.value.employeeStr = employee;
        editCart({
            id: nowCartItem.value.cartId,
            count: nowCartItem.value.count,
            employeeStr: nowCartItem.value.employeeStr
        }).then((res) => {
            calculate()
        })
    }
}
const confirmPassword = (password: any) => {
    createData.value.password = password
    confirmOrder()
}
const confirmCartItem = (item: any) => {
    if (item.type == 'updatePrice') {
        editCart({
            id: item.id,
            count: item.count,
            distType: item.distType,
            payPrice: item.payPrice,
            distPrice: item.distPrice

        }).then((res) => {
            updatePriceFormRef.value.confirm()
            calculate()

        })
    } else {
        editCart({
            id: item.id,
            count: item.count,
            arrearsPrice: item.arrearsPrice

        }).then((res) => {
            updatePriceFormRef.value.confirm()

            calculate()


        })
    }
}
/**
 * 选择员工 end
 */
const getCartInfo = (cartId: any) => {
    let item = createData.value.items.find((ele) => {
        return ele.cartId == cartId
    })
    return item
}
/**
 * 订单计算
 */
const calculate = () => {
    console.log('loading')
    uni.showLoading()
    let params = {
        deliveryType: createData.value.delivery.delivery_type,
        addressId: createData.value.delivery.take_address_id,
        pickUpStoreId: createData.value.delivery.take_store_id,
        combinationActivityId: createData.value.extend_data.activity_id,
        combinationHeadId: createData.value.extend_data.head_id,
        seckillActivityId: createData.value.extend_data.seckill_activity_id,
        pointActivityId: createData.value.extend_data.point_activity_id,
        items: createData.value.items,
        pay: createData.value.pay,
        couponId: createData.value.discount.coupon_id,

        no: createData.value.no
    }

    orderCreateCalculate(params).then(({ data }) => {
        // 优惠券
        coupons.value = data.coupons
        uni.hideLoading()
        orderData.value = cloneDeep(data);
        orderData.value.goods = []; //购买商品
        if (orderData.value.items && Object.values(orderData.value.items).length) {
            Object.values(orderData.value.items).forEach(async (item, index) => {
                if (item.spuType == 3) {
                    const { data: activeInfo } = await getSkuActivity({ activityId: item.skuId })
                    item.activeInfo = activeInfo

                }
                orderData.value.goods.push(item);
            })
        }
        if (createData.value.discount.coupon_id) {

            couponList.value.forEach((ele: any) => {
                if (ele.couponId == createData.value.discount.coupon_id) {
                    useCoupon.value = ele
                }


            })
        }




    }).catch(
        (error) => {
            console.log(error)
            let goBackParameter = {
                url: '/addon/shop/pages/index',
                title: error.msg,
                mode: 'reLaunch'
            };
            goback(goBackParameter)

        }
    )
}
onMounted(() => {
    calculate()

})



// let orderId = 0
const autoConfirm = ref(false) //自动提交

/**
 * 订单创建
 */
const create = () => {
    // if (!verify() || createLoading.value) return

    if (orderData.value.price.payPrice == 0) {
        confirmOrder()
    } else {
        handleSelectPayment()

    }

    // useSubscribeMessage().request('shop_order_pay,shop_order_delivery')

}

/**订单提交 */
const confirmOrder = () => {
    if (!verify() || createLoading.value) return

    if (createData.value.repairDate && !createData.value.member_remark) {
        uni.showToast({ title: "请输入备注信息", icon: 'none' });

        return
    }
    if (createData.value.enalePassword && !createData.value.password) {
        passwordRef.value.open()
        return
    }
    if (!createData.value.enalePassword && !createData.value.password) {
        let params = {
            scene: 0,
            code: ''
        }
        passwordRef.value.confirm(params)
        return
    }
    createLoading.value = true

    let params = {
        items: createData.value.items,
        deliveryType: createData.value.delivery.delivery_type,
        combinationActivityId: createData.value.extend_data.activity_id, //拼团ID
        combinationHeadId: createData.value.extend_data.head_id,
        seckillActivityId: createData.value.extend_data.seckill_activity_id, //秒杀ID
        remark: createData.value.member_remark,
        authToken: createData.value.password, //密码
        rebateType: createData.value.rebateType, //分成类型
        employeeStr: createData.value.employeeStr, //员工
        isRepair: createData.value.repairDate ? 1 : 0, //是否补录
        repairDate: createData.value.repairDate, //补录日期
        no: createData.value.no

    }
    orderCreate(params).then(async ({ data }) => {
        if (data.payOrderId) {
            let merchantOrderId = data.id
            let payOrderId = data.payOrderId
            checkPayStatus(merchantOrderId, payOrderId, 'confirm')

        }
        console.log(data)

    }).catch(() => {
        createData.value.password = ""
        createLoading.value = false
    })

}
/** 支付详情 */
const isHavPick = ref(false) //是否有可寄存商品
const payStatus = ref() //订单支状态
const checkPayStatus = async (merchantOrderId, payOrderId, type) => {
    // 获得支付订单信息
    const payInfoRes = await getPayInfo({ id: payOrderId, sync: true })

    let data = payInfoRes.data
    if (data) {
        if (data.status == 10) {
            // 更新订单状态
            await getShopOrderDetail({ id: merchantOrderId, sync: true })
            redirect({ url: '/addon/shop/pages/shopOrder/detail', param: { order_id: merchantOrderId }, mode: 'redirectTo' })


        }
    }

    console.log(data)

}
/**
 * 下单校验
 */
const verify = () => {
    const data = createData.value

    let verify = true
    if (true) {
        if (cartEmployeeText.value == '') {
            if (data.rebateType == 1) {
                uni.showToast({ title: '请选择员工', icon: 'none' })
            }
            if (data.rebateType == 0) {
                autoConfirm.value = true

                employeeRef.value.open([])
            }

            return false
        }
        if (data.isRepair) {
            if (data.repairDate == '') {
                uni.showToast({ title: '请选择补录日期', icon: 'none' })

                return false
            }
            if (data.remark == '') {
                uni.showToast({ title: '请输入补录备注', icon: 'none' })

                return false
            }
        }

    }
    return verify
}

/**
 * 支付弹窗关闭
 */
// const payClose = () => {
//     redirect({ url: '/addon/shop/pages/shopOrder/detail', param: { order_id: orderId }, mode: 'redirectTo' })
// }



const couponList = computed(() => {
    return couponRef.value?.couponList || []
})

/**
 * 选择优惠券
 */
const confirmSelectCoupon = (coupon: any) => {
    console.log(coupon)
    createData.value.discount.coupon_id = coupon ? coupon.couponId : 0
    calculate()
}

const confirmInvoice = (invoice: object) => {
    createData.value.invoice = invoice
}


</script>

<style lang="scss" scoped>
@import '@/addon/shop/styles/common.scss';

:deep(.u-tabbar) {
    .u-tabbar__content {

        .u-tabbar__content__item-wrapper {
            height: 120rpx !important;

        }
    }
}

.head-tab {
    .head-tab-item {
        .tab-image {
            left: 50%;
            transform: translateX(-50%);
        }

        &:nth-child(1).active {
            view {
                padding-right: 40rpx;
            }
        }

        &:nth-child(2) {
            .tab-image {
                width: 312rpx;
            }
        }

        &:nth-child(3).active {
            view {
                padding-left: 30rpx;
            }
        }

        &.active {
            view {
                font-weight: bold;
                color: var(--primary-color);
            }
        }

        .tab-img {
            left: 50%;
            transform: translateX(-50%);
        }

    }
}

:deep(.u-alert) {
    padding: 6rpx 16rpx !important;
    display: inline-block !important;
}

.alert-wrap {
    display: inline-block !important;

    :deep(.u-fade-enter-active) {
        display: inline-block !important;
    }
}

.text-ellipsis {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.line-normal {
    line-height: normal;
}

.bg-color {
    background: linear-gradient(94deg, var(--primary-help-color) 0%, var(--primary-color) 69%), var(--primary-color);
}

:deep(.uni-date__x-input) {
    height: unset;
    line-height: 1;
}

:deep(.u-action-sheet) {
    .u-line {
        margin: 0 30rpx !important;
        width: auto !important;
        border-color: #ddd !important;
    }

    .u-action-sheet__cancel {
        padding: 0;

    }

    .u-action-sheet__item-wrap__item__name {
        font-size: 30rpx !important;
    }
}

.payment-bottom {
    padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
}
</style>
